<template>
  <div class="form-container">
    <div class="form-container-inner">
      <img :src="Item.cover" alt="" style="margin-left: -60%" />
      <div class="form" style="margin-left: 47%; margin-top: -57%">
        <form
          id="form"
          action="http://101.33.228.125:8777/alipay"
          method="post"
          style="margin-top: 21%; position: absolute"
        >
          <!--   *商户订单 :-->
          <ul>
            <li>
              <h2>订单书名:{{ Item.subject }}</h2>
              <input
                type="text"
                name="subject"
                :value="Item.subject"
                v-show="false"
              />
            </li>
            <li>
              <h2>付款金额 :{{ Item.total_amount }}</h2>
              <input
                type="text"
                name="total_amount"
                :value="Item.total_amount"
                v-show="false"
              />
            </li>
            <!-- <li>
              <h2>商品描述 :{{ Item.body }}</h2>
              <input
                type="text"
                name="body"
                :value="Item.body"
                v-show="false"
              /><br />
            </li> -->
          </ul>

          <input type="submit" value=" " id="submit" />
          <input
            type="button"
            style="
              width: 119px;
              height: 46px;
              border: 3px solid white;
              border-radius: 20px;
              font-size: 30px;
              margin-left: 20%;
              margin-top: 23%;
              position: absolute;
            "
            @click="fail"
            value="取消"
          />
        </form>
        <!-- <button
            style="
            width: 119px;
    height: 46px;
    border: 3px solid white;
    border-radius: 20px;
    font-size: 30px;
    margin-left: 3%;
    margin-top: 86%;
    position: absolute;
            "
            @click="fail"
          >
            取消
          </button> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Alipay",
  data() {
    return {
      Item: [
        {
          subject: "",
          total_amount: "",
          body: "",
          cover: "",
        },
      ],
    };
  },
  methods: {
    log() {
      this.Item.subject = sessionStorage.getItem("subject");
      this.Item.total_amount = sessionStorage.getItem("total_amount");
      this.Item.cover = sessionStorage.getItem("cover");
      if (sessionStorage.getItem("body") == "null") {
        this.Item.body = "暂无描述";
      } else {
        this.Item.body = sessionStorage.getItem("body");
      }
    },
    fail() {
      this.$router.replace("/bookpage");
      console.log("取消");
    },
  },
  created: function () {
    this.log();
  },
};
</script>
<style scoped>
#submit {
  width: 119px;
  height: 46px;
  border: 3px solid;
  border-radius: 20px;
  background: url(/src/assets/zhifubao.jpg) no-repeat center;
  margin-top: 23%;
  margin-left: -51%;
  cursor: pointer;
  color: white;

  background-size: 100%;
}
.form-container {
  width: 100%;
  height: 88%;
  position: relative;
  /* margin-left: 37%; */
  background-image: url(../../assets/5.jpg);
  background-size: cover;
}
.form-container-inner {
  width: 35%;
  height: 23rem;
  border: 5px solid #a1bf39;;
  margin-left: 33%;
  position: absolute;
  padding: 2%;
  margin-top: 13%;
  background-color: rgb(8 110 133 / 65%);
}
ul {
  list-style: none;
}
h2 {
  color: white;
    margin-top: 3%;
    margin-bottom: 24%;



}
</style>